﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Social Modal Box</title>
<meta http-equiv="Content-Type" content="text/html; utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  !window.jQuery && document.write('<script src="js/jquery.js"><\/script>')
</script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="js/jquery.socialmodal.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/socialmodal.css">
<script language="javascript">
$(function() {
	$('body').socialmodal({
		uniqueName: 'autoloadmodal',
		subtitle: 'C\'mon, try to share and then try other examples.',
		plusone: 'http://www.pixelshub.com/',
		count: 0,
		manualClose: true,
	});
	
	//look at special styling
	$('body').socialmodal({
		uniqueName: 'examplepremium',
		title: 'Premium content',
		content: 'You can see there: <ul><li><strong>special CSS styling</strong></li><li>advanced callback<ul><li>share this and you will see premium content</li><li>refresh page - text will be visible because callback is set to call after document loads.</li></ul></ul><strong>Isn\'t that awesome?</strong>',
		facebook: 'http://www.facebook.com/pages/PixelsHubcom/146763572070291',
		plusone: false,
		twitter: 'pixelshub',
		onclick: '#premium',
		afterDocReady: true,
		callback: function(success) {
			if (success==true) {
				$('#message').html('It\'s not a magic, it\'s jQuery Social Modal Box plugin!').slideDown(2000);
				$('#premium').hide();
			}
		},
	});
	$('body').socialmodal({
		uniqueName: 'exampledownload',
		title: 'Download',
		subtitle: 'Pay with tweet - tweet or wait',
		count: 60,
		facebook: false,
		plusone: false,
		onclick: '#download',
		callback: function(success) {
			window.location.href = 'img/thumb.jpg';
		},
	});
});
</script>
<style>
#examplepremium .like { margin-left: 80px; }
#exampledownload .twttr { margin-left: 165px; }
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<h1>jQuery Social Modal Box</h1><h2>Demostration</h2>
		<p class="info">Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to <a href="mailto:support@pixelshub.com">email us</a>. Thanks so much!<p>
	</div>
	<div id="message"></div>
	<div id="container">
		<div class="left">
			<h3>Features</h3>
			<ul class="features">
				<li>Combines <strong>3 social networks</strong> - Facebook, Google+ and Twitter</li>
				<li><strong>Cookies</strong> remember users who have already shared</li>
				<li><strong>Autoload</strong> or load after <strong>click on element</strong></li>
				<li>Warning if cookies are disabled (with customizable text)</li>
				<li>More modal boxes in one page</li>
				<li><strong>Customizable CSS</strong> with special styling for individual modals</li>
				<li>Optional countdown with optional close (with customizable text)</li>
				<li><strong>Advanced callback</strong> functions (plugin <strong>returns success</strong> (true or false), option to call callback after document loads)</li>
				<li>Can specify URL to share, don't need to specify current URL, can turn off social network button</li>
		</ul>
		</div>
		<div class="right">
			<h3>Examples</h3>
			<button class="minimal" id="premium">Premium content</button>
			<button class="minimal" id="download">Download</button>
		</div>
		<div style="height:1px; width: 100%; clear:both"></div>
	</div>
	<div id="footer">
		&copy; PixelsHub.com 2011
	</div>
</div>
</body>
</html>
